<template>
    <div class="meeting-apply">
        <apply-header process-name="新建会议" @cancel-click="cancelClick" @submit-click="submit"/>
        <div class="apply-content">
            <el-form ref="meetingFromRef" :model="meeting" :rules="rules" label-position="left" label-width="130px" label-suffix="：">
                <form-title title="会议申请"/>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="会议主题" prop="topic">
                            <el-input v-model="meeting.topic" type="text" placeholder="请输入会议主题" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :sapn="24">
                        <el-form-item label="会议时间" prop="meetingTime">
                            <el-date-picker type="datetimerange"
                                            v-model="meeting.meetingTime"
                                            start-placeholder="会议开始时间"
                                            end-placeholder="会议结束时间"
                                            format="YYYY/MM/DD HH:mm"
                                            value-format="YYYY-MM-DD HH:mm"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24" >
                        <el-form-item label="物质需求" prop="requires" >
                            <el-input type="textarea" v-model="meeting.requires" rows="3" placeholder="会议需求"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24" >
                        <el-form-item label="参会人员" prop="people">
                            <el-transfer
                                :titles="['所有员工', '参会员工']"
                                :button-texts="['移出会议', '加入会议']"
                                v-model="meeting.people"
                                :data="empOptions"
                                :props="{
                            key: 'value',
                            label: 'label'
                        }"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </div>
</template>

<script>
import {getCurrentInstance, reactive, ref, toRefs} from "vue";
import {getDeptOptions} from "../../../network/sys/dept";
import {selectEmp} from "../../../network/adm/office";
import {createMeeting} from '../../../network/adm/meeting'
import {ElLoading, ElMessage} from "element-plus";
import ApplyHeader from "../../com/apply/ApplyHeader.vue";
import FormTitle from "../../com/apply/FormTitle.vue";

export default {
    name: "AddMeetingForm",
    components: {FormTitle, ApplyHeader},
    setup(prop,{emit}){
        const meetingFromRef = ref(null);
        const globalProperties = getCurrentInstance()?.appContext.config.globalProperties;
        const form = reactive({
            //预定会议参数
            meeting:{
                topic: null,
                empId: null,
                // convener: null,
                // deptId: globalProperties.$store.state.loginUser.deptId,
                // peopleNum: null,
                // chamberId: null,
                chamberId: null,
                requires: null,
                people: [],
                startTime: null,
                endTime: null,
                meetingTime: null
            },
            rules:{
                topic: [
                    {required: true,message:'请输入会议主题',trigger:'blur'}
                ],
                people: [
                    {required:true,message:'请选择参会人员',trigger:'blur'}
                ],
                meetingTime: [
                    {required:true,message:'请选择会议时间',trigger:'blur'}
                ],
            },
            submit(){
                meetingFromRef.value.validate((valid)=>{
                    if(valid){
                        let loading = ElLoading.service({
                            lock: true,
                            text: '正在创建会议...',
                        });
                        let {topic, requires, people, meetingTime} = form.meeting;
                        let meeting = {
                            topic,
                            requires,
                            people,
                            empId: globalProperties.$store.state.loginUser.id,
                            host: globalProperties.$store.state.loginUser.empName,
                            startTime: meetingTime[0],
                            endTime: meetingTime[1]
                        };
                        createMeeting(meeting).then(vo=>{
                            loading.close();
                            globalProperties.$response.handle({
                                data:vo,
                                success:'会议申请成功...',
                                successFn:()=>{
                                    form.resetForm();
                                    let returnUrl = this.$route.query.returnUrl;
                                    // if(returnUrl){
                                    //     globalProperties.$router.push(returnUrl);
                                    // }
                                },
                                failFn:()=>{
                                    ElMessage.error('申请失败!');
                                }
                            })
                        })
                    }else{
                        ElMessage.error('请先完善表单!');
                    }
                })
            },
            resetForm(){
                meetingFromRef.value.clearValidate();
                meetingFromRef.value.resetFields();
            }
        })
        return {
            ...toRefs(form),
            meetingFromRef
        }
    },
    data(){
        return {
            deptOptions: [],
            empOptions: [],
        }
    },
    methods:{
        loadDeptOptions(){
            getDeptOptions(1).then(res=>{
                this.deptOptions = res.data;
                // console.log('部门名称',this.deptIdOptions)
            })
        },
        loadEmpOptions(){
            selectEmp().then(vo=>{
                this.empOptions = vo.data;
            })
        },
        cancelClick() {
            console.log('this.$route.path',this.$route.path);
            this.$operate.confirm({
                title: '取消申请',
                hint: '你确认要取消申请吗？',
                executeFn: ()=>{
                    let returnUrl = this.$route.query.returnUrl;
                    if(returnUrl){
                        this.$router.push(returnUrl);
                        // console.log('returnUrl',returnUrl)
                    }else{
                        this.$router.push('/home');
                    }
                }
            })
        },
        init(){
            this.loadDeptOptions();
            this.loadEmpOptions();
        }
    },
    created() {
        this.init();
        console.log('this.$route',this.$route);
        console.log('this.$router',this.$router);
    }
}
</script>

<style scoped>
*{
    /*border: 1px solid red;*/
}
.meeting-apply{

}
.apply-content{
    margin: 0 auto;
    width: 1240px;
    box-shadow: 0 0 2px 1px lightgrey;
    background: rgb(252,252,252);
    padding: 0 20px;
    box-sizing: border-box;
}
</style>
<style>
.el-time-spinner__item {
    width: 100%;
}
/*.el-transfer>.el-transfer-panel{*/
/*    width: 200px;*/
/*}*/
.el-transfer{
    height: 300px;
}
</style>
